Plug-ins

DataTables

DataTables is a Javascript HTML table enhancing library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Reference

API Plug-in Methods

The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the $.fn.dataTable.Api.register function. This function takes two arguments

entries per page

Search:

Name	Position	Office	Age	Start date	Salary
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Name	Position	Office	Age	Start date	Salary

Showing 1 to 10 of 30 entries

Ordering Plug-ins (with type detection)

Although DataTables will automatically order data from a number of different data types using the built in methods, when dealing with more complex formatted data

entries per page

Search:

Name	Position	Office	Age	Start date	Salary
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Name	Position	Office	Age	Start date	Salary

Showing 1 to 10 of 30 entries

Custom Filtering - Range Search

There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range searches (in between two numbers) and date range searches

Minimum age:
Maximum age:

entries per page

Search:

Name	Position	Office	Age	Start date	Salary
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Name	Position	Office	Age	Start date	Salary

Showing 1 to 10 of 30 entries

Live DOM Ordering

This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during its initialization phase

entries per page

Search:

Name	Age	Position	Office
Airi Satou
Angelica Ramos
Ashton Cox
Bradley Greer
Brenden Wagner
Brielle Williamson
Caesar Vance
Cedric Kelly
Charde Marshall
Colleen Hurst
Name	Age	Position	Office

Showing 1 to 10 of 31 entries

Jonh Smith

UI/UX Design

Message

Forms

Challenge invitation

Security

Carson Darrin 🖖

Notification

245.3k Followers

What's new announcement?

Able Pro is Redesigned

Able Pro is in best offer price

Featured Dashboard Template

Buy Once - Get Free Updated lifetime

DataTables

API Plug-in Methods

Ordering Plug-ins (with type detection)

Custom Filtering - Range Search

Live DOM Ordering

Settings

Theme Mode

Theme Contrast

Custom Theme

Theme layout

Sidebar Caption

Theme Layout

Layout Width